<template>
  <test />
  <div class="login">
    <img
      class="l-background-img"
      src="https://aoxqwl-static.oss-cn-shenzhen.aliyuncs.com/image/web-shop/background.png"
      alt=""
    />
    <div class="l-logo">
      <img
        class="l-logo-img"
        src="https://aoxqwl-static.oss-cn-shenzhen.aliyuncs.com/image/web-shop/logo.png"
        alt=""
      />
    </div>
    <p class="l-title">— 欢迎使用XXX店铺系统 —</p>
    <div class="l-form">
      <div class="f-item">
        <n-input
          class="f-input"
          v-model:value="model.username"
          placeholder="请输入账号"
          :clearable="true"
        >
          <template #prefix>
            <div class="i-icon iconfont icon-yonghu"></div>
          </template>
        </n-input>
      </div>
      <div class="f-item">
        <n-input
          class="f-input"
          v-model:value="model.password"
          type="password"
          show-password-on="click"
          placeholder="请输入密码"
        >
          <template #prefix>
            <div class="i-icon iconfont icon-yonghu"></div>
          </template>
          <template #password-visible-icon>
            <div class="i-icon iconfont icon-xianshi"></div>
          </template>
          <template #password-invisible-icon>
            <div class="i-icon iconfont icon-yincang"></div>
          </template>
        </n-input>
      </div>
      <div class="f-item f-item_selector">
        <div class="f-item_selector--left">
          <label>
            <input type="radio" name="adminType" value="1" />
            <span>店主</span>
          </label>
          <label>
            <input type="radio" name="adminType" value="2" />
            <span>店员</span>
          </label>
        </div>
        <div class="f-item_selector--right">
          <label for="">
            <input type="checkbox" />
            <span>记住密码</span>
          </label>
        </div>
      </div>
      <button class="f-button" @click="doLogion">登录</button>
    </div>
    <div class="l-footer">
      <p>技术服务电话：123456</p>
    </div>
    <n-modal
      v-model:show="showModal"
      class="modal-select-shop"
      preset="card"
      style="width: 780px"
      title="选择店铺"
      size="huge"
      :bordered="false"
      :segmented="segmented"
    >
      <div class="modal-select-shop_content">
        <div
          class="modal-select-shop_content-item modal-select-shop_content-item--active"
          @click="$router.replace({ path: '/index' })"
        >
          <img
            class="modal-select-shop_content-item-img"
            :src="prefixOssUrl('shop.png')"
          />
          <p class="modal-select-shop_content-item-name">
            文山壮族苗族自 治州文山市 南山街
          </p>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup>
import test from './tset.jsx'
import { reactive, ref, inject } from "vue";
const { prefixOssUrl } = inject("globalMethods");

const model = reactive({
  username: null,
  password: null,
  type: 1,
});

let showModal = ref(false);
const segmented = reactive({
  content: "soft",
});
const doLogion = () => {
  showModal.value = true;
};
</script>

<style lang="less">
.login {
  display: flex;
  flex-direction: column;
  align-items: center;

  .l-background-img {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  .l-logo {
    width: 346px;
    height: 183px;
    margin-top: 100px;

    &-img {
      width: 100%;
      height: 100%;
    }
  }

  .l-title {
    height: 35px;
    font-size: 36px;
    font-weight: 400;
    font-style: italic;
    color: #fff;
    line-height: 40px;
  }

  .l-form {
    margin-top: 20px;

    .f-item {
      margin: 30px 0;

      .f-input {
        width: 600px;
        height: 90px;
        font-size: 20px;
        line-height: 90px;

        .i-icon {
          font-size: 32px;
          color: #ababab;
        }
      }

      &_selector {
        display: flex;
        justify-content: space-between;

        &--left {
          display: flex;
          align-items: center;

          > label {
            margin-right: 20px;

            > input {
              margin-right: 10px;
              width: 24px;
              height: 24px;
            }

            > span {
              font-size: 30px;
              font-weight: 400;
              color: #fff;
            }
          }
        }

        &--right {
          > label {
            display: flex;
            align-items: center;

            > input {
              margin-right: 10px;
              width: 25px;
              height: 25px;
              background: #fff;
              border: 1px solid #666;
              border-radius: 5px;
            }

            > span {
              font-size: 30px;
              font-weight: 400;
              color: #fff;
            }
          }
        }
      }
    }

    .f-button {
      width: 600px;
      height: 90px;
      margin-top: 20px;
      font-size: 32px;
      font-weight: bold;
      color: #fff;
      background: #1981f4;
      border-radius: 6px;
    }
  }

  .l-footer {
    position: fixed;
    bottom: 50px;
    height: 52px;
    font-size: 20px;
    font-weight: 400;
    color: #a5aab5;
    text-align: center;
    line-height: 30px;
  }
}

.modal-select-shop {
  &_content {
    display: flex;
    align-items: center;
    overflow-x: auto;

    &-item {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      width: 260px;
      height: 280px;
      margin-right: 30px;
      border: 1px solid #e5e5e5;
      border-radius: 5px;

      &-img {
        width: 128px;
        height: 128px;
      }

      &-name {
        width: 200px;
        height: 64px;
        font-size: 30px;
        font-weight: 500;
        color: #4a5060;
        text-align: center;
        line-height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      &:nth-last-child(1) {
        margin-right: 0;
      }

      &--active {
        background: #e6f2ff;
        border: 1px solid #1981f4;
      }
    }
  }
}
</style>
